.channel-list {
  min-height: 100vh;
  background: #f7f8fa;
  padding-top: calc(env(safe-area-inset-top) + 160rpx);

  .channel-list-navbar {
    --nav-bar-icon-color: #343a40;
  }

  .channel-content {
    padding: 24rpx;
  }

  .channel-items {
    margin-bottom: 32rpx;

    .channel-item {
      background: #fff;
      border-radius: 16rpx;
      display: flex;
      flex-direction: column;
      margin-bottom: 24rpx;

      .top {
        display: flex;
        flex-direction: row;
        padding: 24rpx;
        align-items: center;
      }

      .statistics {
        border-top: 1px solid #dedfe0;
        display: none;
      }

      &.open {
        .statistics {
          display: flex;
        }
      }

      &:last-child {
        margin-bottom: 0;
      }

      .preview {
        width: 160rpx;
        height: 74px;
        border-radius: 8rpx;
        margin-right: 24rpx;
      }

      .info {
        flex: 1;

        .title {
          font-size: 28rpx;
          color: #333;
          display: flex;
          align-items: center;
          margin-bottom: 16rpx;
          justify-content: space-between;
        }

        .status {
          display: flex;
          align-items: center;
          margin-bottom: 16rpx;

          .status-dot {
            width: 12rpx;
            height: 12rpx;
            border-radius: 50%;
            background: #ff4d4f;
            margin-right: 8px;
          }

          .status-text {
            font-size: 24rpx;
            color: #ff4d4f;
          }

          &.online {
            .status-dot {
              background: #45a3ff;
            }

            .status-text {
              color: #45a3ff;
            }
          }
        }

        .progress {
          .process-text-wrapper {
            display: flex;
            align-items: center;
            margin-bottom: 8rpx;
            margin-top: 5px;

            .progress-text {
              font-size: 24rpx;
              color: #666;
              margin-right: 5px;
            }

            .iconfont {
              font-size: 24rpx;
              padding-top: 2px;
            }
          }

          .progress-bar {
            height: 8rpx;
            background: #f0f0f0;
            border-radius: 4rpx;
            overflow: hidden;

            .progress-inner {
              height: 100%;
              background: #1989fa;
              border-radius: 4rpx;
            }
          }
        }
      }
    }
  }

  .statistics {
    background: #fff;
    border-radius: 16rpx;
    padding: 24rpx;
    display: flex;
    flex-direction: column;

    .stat-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15rpx 0;
      font-size: 26rpx;

      &:last-child {
        border-bottom: none;
      }

      .label {
        color: #343a40;
      }

      .value {
        color: #30a7e2;

        &.red {
          color: #ff4d4f;
        }
      }
    }
  }
}
